---
import '@docsearch/css/dist/modal.css';
import { getDocSearchStrings } from '~/i18n/util';
import './Search/variables.css';

const docSearchStrings = getDocSearchStrings(Astro);
---

<sl-doc-search data-translations={JSON.stringify(docSearchStrings)}>
	<button type="button" class="DocSearch DocSearch-Button" aria-label={docSearchStrings.button}>
		<span class="DocSearch-Button-Container">
			<svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20">
				<path
					d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
					stroke="currentColor"
					fill="none"
					fill-rule="evenodd"
					stroke-linecap="round"
					stroke-linejoin="round"></path>
			</svg>
			<span class="DocSearch-Button-Placeholder">{docSearchStrings.button}</span>
		</span>
		<span class="DocSearch-Button-Keys"></span>
	</button>
</sl-doc-search>

<script>
	import docsearch from '@docsearch/js';

	// @ts-expect-error todo: add proper type casting
	const translations = JSON.parse(document.querySelector('sl-doc-search').dataset.translations);

	docsearch({
		container: 'sl-doc-search',
		appId: '7AFBU8EPJU',
		indexName: 'astro',
		apiKey: '4440670147c44d744fd8da35ff652518',
		searchParameters: { facetFilters: [[`lang:${location.pathname.split('/')[1]}`]] },
		insights: true,
		getMissingResultsUrl: ({ query }: { query: string }) =>
			`https://github.com/withastro/docs/issues/new?title=Missing+results+for+query+%22${encodeURIComponent(
				query
			)}%22`,
		transformItems: (items) => {
			return items.map((item) => {
				// We transform the absolute URL into a relative URL to
				// work better on localhost, preview URLS.
				const url = new URL(item.url);
				if (url.hash === '#_top') url.hash = '';
				return {
					...item,
					url: url.href.replace(url.origin, ''),
				};
			});
		},
		placeholder: translations.placeholder,
		translations: {
			...translations,
			button: {
				buttonText: translations.button,
				buttonAriaLabel: translations.button,
			},
		},
	});
</script>

<style is:global>
	.DocSearch-Button {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		border: 0;
		background-color: transparent;
		color: var(--sl-color-gray-1);
		cursor: pointer;
		height: 2.5rem;
		font-size: var(--sl-text-xl);
	}
	.DocSearch-Button-Container {
		display: contents;
	}
	.DocSearch-Search-Icon {
		width: 0.875em;
		height: 0.875em;
		stroke-width: 0.125rem;
	}
	.DocSearch-Button-Placeholder,
	.DocSearch-Button-Keys,
	.DocSearch-Button-Key {
		display: none;
	}

	@media (min-width: 50rem) {
		sl-doc-search {
			width: 100%;
		}

		.DocSearch-Button {
			border: 1px solid var(--sl-color-gray-5);
			border-radius: 0.5rem;
			padding-inline-start: 0.75rem;
			padding-inline-end: 1rem;
			background-color: var(--sl-color-black);
			color: var(--sl-color-gray-2);
			font-size: var(--sl-text-sm);
			width: 100%;
			max-width: 22rem;
		}
		.DocSearch-Button:hover {
			border-color: var(--sl-color-gray-2);
			color: var(--sl-color-white);
		}

		.DocSearch-Button-Placeholder,
		.DocSearch-Button-Keys {
			display: flex;
		}
		.DocSearch-Button-Keys {
			margin-inline-start: auto;
		}
		.DocSearch-Button-Keys::before {
			content: '';
			width: 1em;
			height: 1em;
			-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
			mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
			-webkit-mask-size: 100%;
			mask-size: 100%;
			background-color: currentColor;
		}
	}
</style>
